import React, { useState } from 'react';
import './add.scss';
import { ResType } from '../../types/response';
import Button from '../../components/Button';
import { REGULAR_EMPTY } from '../../constants/regular';
import { ApiCustomerAdd } from '../../api/customer';
import Emitter from '../../utils/events';
import { DeleteObjectEmpty } from '../../utils/tools';
import { sessionGet } from '../../utils/storage';
import { CustomerAddType } from './type';

function CustomerAdd() {
  const [info, setInfo] = useState<CustomerAddType>({
    id: '',
    name: '',
    phone: '',
    email: '',
    wechat: '',
    douyin: '',
    kuaishou: '',
    age: '',
    gender: '',
    area: '',
    address: '',
    description: '',
  });

  // 文本框修改
  const changeInput = (key: string, value: string) => {
    let _item: any = {};
    _item[key] = value;
    const _info: CustomerAddType = { ...info, ..._item }
    setInfo(_info)
  }

  // 表单验证
  const verify = async () => {
    let _status: boolean = true,
      _info: CustomerAddType = {
        name: '',
        phone: '',
        email: '',
        wechat: '',
        wechatPromise: '',
        douyin: '',
        kuaishou: '',
        age: '',
        gender: '',
        area: '',
        address: '',
        description: '',
      }
    if (!REGULAR_EMPTY.test(String(info.wechat))) {
      _info.wechatPromise = '微信不能为空';
      _status = false;
    }
    setInfo({ ...info, ..._info });
    return _status;
  }

  // 表单提交
  const submit = async () => {
    if (!await verify()) return;
    let _employeeId: string = sessionGet('YH_CUSTOMER_ID') || '';
    let _data: CustomerAddType = {
      ...info,
      employee_id: _employeeId,
    };
    DeleteObjectEmpty(_data);
    const _ApiSignIn: ResType = await ApiCustomerAdd(_data);
    if (_ApiSignIn.code === 200) {
      Emitter.emit('toast', {
        message: '新增成功',
      });
      window.location.reload(); // 强制页面刷新
    } else {
      Emitter.emit('toast', {
        message: _ApiSignIn.message,
      });
    }
  }

  return (
    <>
      <div className='row'>
        <label htmlFor="name">姓名</label>
        <input id="name" className='input' type="text" placeholder='请输入姓名' onChange={({ target }) => changeInput('name', target.value)} />
        <div className='promise' />
      </div>
      <div className='row'>
        <label htmlFor="phone">手机</label>
        <input id="phone" className='input' type="text" placeholder='请输入手机' onChange={({ target }) => changeInput('name', target.value)} />
        <div className='promise' />
      </div>
      <div className='row'>
        <label htmlFor="wechat">微信</label>
        <input id="wechat" className='input' type="text" placeholder='请输入微信' onChange={({ target }) => changeInput('wechat', target.value)} />
        <div className='promise'>{info.wechatPromise}</div>
      </div>
      <div className='row'>
        <label htmlFor="douyin">抖音</label>
        <input id='douyin' className='input' type="text" placeholder='请输入抖音' onChange={({ target }) => changeInput('douyin', target.value)} />
        <div className='promise' />
      </div>
      <div className='row'>
        <label htmlFor="age">年龄</label>
        <input id="age" className='input' type="text" placeholder='请输入年龄' onChange={({ target }) => changeInput('age', target.value)} />
        <div className='promise' />
      </div>
      <div className='row'>
        <label htmlFor="gender">性别</label>
        <select className='input' id="gender" value='3' onChange={({ target }) => changeInput('gender', target.value)}>
          <option value={1}>男</option>
          <option value={2}>女</option>
          <option value={3}>其他</option>
        </select>
        <div className='promise' />
      </div>
      <div className='row'>
        <label htmlFor="address">详细地址</label>
        <input id="address" className='input' type="text" placeholder='请输入详细地址' onChange={({ target }) => changeInput('address', target.value)} />
        <div className='promise' />
      </div>
      <div className='row'>
        <label htmlFor="description">描述</label>
        <textarea name="" id="description" className='textarea' placeholder='请输入描述' onChange={({ target }) => changeInput('description', target.value)}></textarea>
        <div className='promise' />
      </div>
      <div className='row'>
        <Button text='提交' handle={submit} />
      </div>
    </>
  );
}

export default CustomerAdd;
